import { requireImage, vNodeTransformDom } from '@/utils'

interface PlotDataType {
  props: {
    plotName: string
    imgUrl: any
  }
}
export function createExportPlot(item: PlotDataType) {
  const { props } = item || {
    props: {
      plotName: '',
      imgUrl: '',
    },
  }
  const component = defineComponent({
    setup() {
      const directionNorthImg = requireImage('common/directionNorth.png')
      const userInfo: any = JSON.parse(localStorage.getItem('userXfjgJyryInfo') || '{}') || ''
      console.log('userInfo', userInfo)

      const fireFightExportPlot = `
        position: absolute;
        left: 20px;
        top: 20px;
        width: 1920px;
        height: 1079px;
        z-index: -1;
        background: #ffffff;
        font-family: Microsoft YaHei;
        font-weight: bold;
        border: 1px solid #666666;`

      const colorStyle = `color: #000000;`
      const borderStyle = `border: 4px solid #000;`
      const scaleStyle = `border: 4px solid #000; border-top: none;`
      const getCurrentTime = () => {
        const time = new Date()
        const timeList = time.toLocaleString().split(' ')
        const dateTime = timeList[0].split('/')
        const hourList = timeList[1].split(':')
        const year = parseInt(dateTime[0])
        const month = parseInt(dateTime[1])
        const day = parseInt(dateTime[2])
        return year + '年' + month + '月' + day + '日 ' + hourList[0] + ':' + hourList[1]
      }

      return () => {
        return (
          <div style={fireFightExportPlot}>
            <div
              className='w-full h-86px flex justify-center items-center text-36px'
              style={colorStyle}>
              {props.plotName}
            </div>
            <img src={directionNorthImg} className='w-46px h-46px absolute right-35px top-41px' />
            <div className='w-1700px h-971px mt-71px ml-110px p-6px box-border' style={borderStyle}>
              <img style={borderStyle} src={props.imgUrl} className='w-1671px h-943px' />
            </div>

            <div
              className='w-1700px flex justify-between mt-10px ml-110px text-20px'
              style={colorStyle}>
              <div className='flex'>
                <div className='w-66px h-16px' style={scaleStyle}></div>
                <div className='-mt-2px ml-10px'>10m</div>
              </div>
              <div>制图单位 : {userInfo.sjjgmc}</div>
              <div>制图人 : {userInfo.xm}</div>
              <div>制图时间 : {getCurrentTime()}</div>
            </div>
          </div>
        )
      }
    },
  })

  return {
    components: component,
    outHTML: vNodeTransformDom(component, true),
  }
}
